<template>
	<view class="container">
		<view class="pay-heared">
			<view class="pay-dis">
				应付金额：<text class="num">&yen;{{(orderInfo.sell_price * orderInfo.num).toFixed(2)}}</text>
			</view>
		</view>
		<view class="pay-info">					
			<view class="pay-info-item">
				<view class="hd">
					订单号：
				</view>
				<view class="bd">
					{{orderInfo.order_sn}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					产品名称：
				</view>
				<view class="bd" v-if="orderInfo.product_name">
					{{orderInfo.product_name}}					
				</view>
			</view>	
			<view class="pay-info-item">
				<view class="hd">
					客人姓名：
				</view>
				<view class="bd" v-if="orderInfo.linkman">
					{{orderInfo.linkman}}					
				</view>
			</view>	
			<view class="pay-info-item">
				<view class="hd">
					客人电话：
				</view>
				<view class="bd" v-if="orderInfo.linkphone">
					{{orderInfo.linkphone}}					
				</view>
			</view>	
			<view class="pay-info-item">
				<view class="hd">
					人数：
				</view>
				<view class="bd" v-if="orderInfo.num">
					{{orderInfo.num}}					
				</view>
			</view>	
			<!-- <view class="pay-info-item">
				<view class="hd">
					上车地点：
				</view>
				<view class="bd" v-if="orderInfo.bycar_place">
					{{orderInfo.bycar_place}}					
				</view>
			</view>	
			<view class="pay-info-item">
				<view class="hd">
					上车时间：
				</view>
				<view class="bd" v-if="orderInfo.bycar_time">
					{{orderInfo.use_date}} {{orderInfo.bycar_time}}					
				</view>
			</view>	 -->
			<view class="pay-info-item">
				<view class="hd">
					下单时间：
				</view>
				<view class="bd" v-if="orderInfo.create_time">
					{{ get_date_format(orderInfo.create_time) }}
				</view>
			</view>
		</view>

		
		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-alone-btn-default " @click="payorder">
				<view class="text" >立即支付</view>
			</view>
		</footer-fixed-bar>
		
		
	</view>
</template>

<script>
	import {
		get_date_format
	} from '@/utils/utils.js'
	import {
		apiUrl
	} from '@/api/base.js'
	import footerFixedBar from "@/components/footer-fixed-bar.vue";	
	export default {
		components: {
		footerFixedBar
		},
		data() {
			return {
				orderInfo: {}				
			}
		},
		onLoad(options) {			
			//信息设置
			if (options.order_sn) {
				uni.request({
					url: apiUrl + "addons/car/order/getOrder",
					data: {
						order_sn:options.order_sn
					},
					method: "GET",
					success: (res) => {
						this.orderInfo=res.data.data
					},
					fail: (res) => {
						console.log(res)
					}
				})
			}
		},
		onShow() {
			
		},
		methods: {
			// 获取日期
			get_date_format(time) {
				return get_date_format(time,"yyyy-MM-dd hh:mm:ss");
			},
			payorder(){
				var that = this
				uni.request({
					url: apiUrl + "addons/car/order/pay",
					data: {
						order_sn:that.orderInfo.order_sn
					},
					method: "GET",
					success: (res) => {						
						uni.requestPayment({
						    provider: 'wxpay',
						    timeStamp: res.data.data.timeStamp,
						    nonceStr: res.data.data.nonceStr,
						    package: res.data.data.package,
						    signType: 'MD5',
						    paySign: res.data.data.paySign,
						    success: function (res) {
						        uni.navigateTo({
						        	url: '/pages/pay/paysuccess?order_sn='+that.orderInfo.order_sn
						        });
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
					},
					fail: (res) => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
	}

	.pay-heared {
		height: 100rpx;
		padding: 80rpx 44rpx 20rpx;
		background: url(https://xcx.zhilvhulian.com/res/static/images/h5_pay_bg.jpg) center no-repeat;
		background-size: cover;
		font-weight: bold;
		.pay-dis {
			font-size: 32rpx;
			color: $uni-text-color-inverse;

			text {
				color: #fff100;
				font-family: Arial, Helvetica, sans-serif;
			}
		}
	}

	.mb-20 {
		margin-bottom: 20rpx !important;
	}

	.iconfont {
		margin-left: 10rpx;
		color: $uni-color-primary;
		vertical-align: middle;
	}

	.pay-info {
		margin: 0 $uni-spacing-col-lg;
		background: $uni-bg-color;
		border-radius: 8rpx;
		padding: $uni-spacing-row-sm;
		position: relative;
		display: block;
		z-index: 1;
		top: -40rpx;

		.pay-info-item {
			display: flex;
			font-size: $uni-font-size-base;
			padding: 16rpx 0;

			.hd {
				color: $uni-text-color-grey;
				width: 144rpx;
				flex: 0 0 auto;
			}

			.bd {
				color: $uni-text-color;
				word-break: break-all;
				flex: 1 1 auto;
			}
		}
	}

	.pay-way {
		margin: 0 $uni-spacing-col-lg;
		background: $uni-bg-color;
		border-radius: 8rpx;
		padding: 0 $uni-spacing-row-sm;

		.pay-way-item {
			display: flex;
			font-size: $uni-font-size-base;
			padding: 34rpx 0;
			position: relative;

			&::after {
				content: '';
				display: block;
				width: calc(100% - 62rpx);
				background-color: $uni-border-color;
				height: 2rpx;
				transform: scale(1, 0.5);
				position: absolute;
				bottom: 0;
				left: 62rpx;
			}

			&:last-child::after {
				content: '';
				display: none;
			}

			.hd {
				width: 62rpx;
				flex: 0 0 auto;

				image {
					width: 48rpx;
					height: 36rpx;
				}
			}

			.bd {
				flex: 1 1 auto;
				color: #000000;
				font-size: $uni-font-size-base;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	// 底部独立按钮
	.footer-alone-btn-default {
		text-align: center;
		padding: 0 25rpx 22rpx;
		background: $uni-bg-color-grey;

		.text {
			background: #ff6913;
			padding: 24rpx 0;
			color: $uni-text-color-inverse;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-lg;
		}

		.btn-disabled {
			background: #999999;
		}
	}
</style>
